<template>
  <div class="refund-records page-container">
    <div class="page-header">
      <div class="header-content">
        <h1 class="page-title">退款记录</h1>
        <p class="page-subtitle">用于与第三方平台对账的退款记录，仅展示信息</p>
      </div>
    </div>

    <div class="content-card">
      <div class="search-section">
        <el-input
          v-model="searchForm.orderNo"
          placeholder="订单编号"
          class="search-input"
          clearable
          @keyup.enter="handleSearch"
        />
        <el-input
          v-model="searchForm.refundNo"
          placeholder="退款单号"
          class="search-input"
          clearable
          @keyup.enter="handleSearch"
        />
        <el-button type="primary" @click="handleSearch">查询</el-button>
        <el-button @click="handleReset">重置</el-button>
      </div>

      <el-table :data="tableData" v-loading="loading" border class="data-table">
        <el-table-column
          prop="orderNo"
          label="订单编号"
          min-width="220"
          show-overflow-tooltip
        />
        <el-table-column
          prop="refundNo"
          label="退款单号"
          min-width="220"
          show-overflow-tooltip
        />
        <el-table-column prop="refundType" label="退款类型" width="120">
          <template #default="{ row }">
            <el-tag type="info">{{ formatRefundType(row.refundType) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="refundDesc"
          label="退款原因"
          min-width="180"
          show-overflow-tooltip
        />
        <el-table-column
          prop="applyRefundAmount"
          label="申请退款金额"
          width="140"
          align="right"
        >
          <template #default="{ row }">
            {{ formatCurrency(row.applyRefundAmount) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="refundAmount"
          label="实际退款金额"
          width="140"
          align="right"
        >
          <template #default="{ row }">
            {{ formatCurrency(row.refundAmount) }}
          </template>
        </el-table-column>
        <el-table-column prop="refundStatus" label="退款状态" width="120">
          <template #default="{ row }">
            <el-tag :type="statusTagType(row.refundStatus)">{{
              formatRefundStatus(row.refundStatus)
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="applyTime" label="申请时间" width="170" />
        <el-table-column prop="processTime" label="受理时间" width="170" />
        <el-table-column prop="successTime" label="成功时间" width="170" />
        <el-table-column prop="operatorName" label="受理人" width="120" />
        <el-table-column
          prop="remark"
          label="备注"
          min-width="160"
          show-overflow-tooltip
        />
      </el-table>

      <div class="table-footer">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :page-sizes="[10, 20, 50, 100]"
          :total="total"
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          @current-change="handlePageChange"
          @size-change="handlePageSizeChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { postWithAuth } from "@/utils/request";

interface RefundRecord {
  orderNo: string;
  refundNo: string;
  refundType: number; // 1-整单退款 2-部分退款
  refundDesc: string | null;
  refundAmount: number | null;
  applyRefundAmount: number | null;
  refundStatus: number; // 0-申请中；1-退款成功；2-退款失败；3-退款中；4-已取消；5-拒绝
  applyTime: string | null;
  processTime: string | null;
  successTime: string | null;
  operatorName: string | null;
  remark: string | null;
}

const loading = ref(false);
const tableData = ref<RefundRecord[]>([]);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);

const searchForm = reactive({
  orderNo: "",
  refundNo: "",
});

const formatRefundType = (t?: number) => {
  switch (t) {
    case 1:
      return "整单退款";
    case 2:
      return "部分退款";
    default:
      return t == null ? "-" : String(t);
  }
};

const formatRefundStatus = (s?: number) => {
  switch (s) {
    case 0:
      return "申请中";
    case 1:
      return "退款成功";
    case 2:
      return "退款失败";
    case 3:
      return "退款中";
    case 4:
      return "已取消";
    case 5:
      return "拒绝";
    default:
      return s == null ? "-" : String(s);
  }
};

const statusTagType = (s?: number) => {
  switch (s) {
    case 1:
      return "success";
    case 0:
    case 3:
      return "warning";
    case 2:
      return "danger";
    default:
      return "info";
  }
};

const formatCurrency = (v: number | null | undefined) => {
  const n = Number(v || 0);
  return n.toLocaleString(undefined, {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2,
  });
};

const fetchRefundRecords = async () => {
  loading.value = true;
  try {
    const res = await postWithAuth("/internal/financial/refundedRecords", {
      orderNo: searchForm.orderNo || "",
      refundNo: searchForm.refundNo || "",
      pageIndex: currentPage.value,
      pageSize: pageSize.value,
    });

    if (res.code === 0 && res.data) {
      tableData.value = Array.isArray(res.data.list) ? res.data.list : [];
      total.value = Number(res.data.total || 0);
    } else {
      tableData.value = [];
      total.value = 0;
      if (res.message) ElMessage.error(res.message);
    }
  } catch (e) {
    console.error(e);
    ElMessage.error("获取退款记录失败");
    tableData.value = [];
    total.value = 0;
  } finally {
    loading.value = false;
  }
};

const handleSearch = () => {
  currentPage.value = 1;
  fetchRefundRecords();
};

const handleReset = () => {
  searchForm.orderNo = "";
  searchForm.refundNo = "";
  currentPage.value = 1;
  fetchRefundRecords();
};

const handlePageChange = () => fetchRefundRecords();
const handlePageSizeChange = () => {
  currentPage.value = 1;
  fetchRefundRecords();
};

onMounted(() => {
  fetchRefundRecords();
});
</script>

<style scoped>
.page-container {
  padding: 16px;
}
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.page-title {
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 600;
  color: #303133;
}
.page-subtitle {
  margin: 0;
  color: #909399;
  font-size: 14px;
}

.content-card {
  background: #fff;
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.search-section {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}
.search-input {
  width: 220px;
}

.data-table :deep(.cell) {
  white-space: nowrap;
}
.table-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
</style>
